<template>
  <div class="eltables2">
    <el-table :data="tableData" height="575" style="width: 100%">
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="dataCenter" label="数据中心" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.data_center" :value="scope.row.dataCenter"/>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
         <template slot-scope="scope">
        <div :class="statusClass[scope.row.status]">
          {{ getChangeType(scope.row.status) }}
        </div>
      </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.backup_type" :value="scope.row.backupType"/>
        </template>
      </el-table-column>
      <el-table-column prop="dataNumber" label="数据量(GB)" align="center"></el-table-column>
      <el-table-column prop="createTime" label="日期" align="center" width="160px"></el-table-column>
      <el-table-column fixed="right" label="操作">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
      </template>
    </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getPagination(queryParams)"
    />

    <!-- 日志 -->
    <el-dialog title="日志详情" :visible.sync="openLog" width="42%" append-to-body>
      <div style="height: 500px;overflow: auto;">
        <span>{{ logText }}</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
        <el-button @click="openLog = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {currentAbnormalListPanel,abnormalListPanel,getLogPanel} from '@/api/system/panel.js'
import { 
  getYesterDayDate,
 } from "@/utils/date.js";

export default {
  name: 'elTables',
  dicts: ['status','data_center','backup_type'],
  components: {},
  props: {
    dictList: {
      type: Array,
      default: () => []
    },
    statuIndexAb: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      logText: '',
      openLog: false,
      // 总条数
      total: 8,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        timeFrom: getYesterDayDate(0),
        timeTo: getYesterDayDate(0)
      },
      tableData: [
        // {
        //   dataCenter: '北京',
        //   status: '故障',
        //   type:'手动',
        //   number:'7052KB',
        //   date: '2016-05-16',
        //   operation:'查看'
        // },{
        //   dataCenter: '北京',
        //   status: '延时',
        //   type:'手动',
        //   number:'6437KB',
        //   date: '2016-05-14',
        //   operation:'查看'
        // },{
        //   dataCenter: '北京',
        //   status: '异常',
        //   type:'自动',
        //   number:'3317KB',
        //   date: '2016-05-02',
        //   operation:'查看'
        // },{
        //   dataCenter: '上海',
        //   status: '告警',
        //   type:'手动',
        //   number:'4221KB',
        //   date: '2016-05-01',
        //   operation:'查看'
        // }
      ],
    }
  },
  watch: {
    statuIndexAb: {
      handler(val) {
        this.statuInd = val;
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    // this.getListPanel()
  },
  methods: {
    getChangeType(e) {
      for (var i = 0; i < this.dictList.length; i++) {
        if (this.dictList[i].dictValue == e) { //value，label保持和上面定义一致
          return this.dictList[i].dictLabel;
        }
      }
    },
    // 异常信息提醒 当前
    getCurrentAbnormalList(params) {
      currentAbnormalListPanel(params).then((res) => {
        if(res.code === 200) {
          this.tableData = res.rows
          this.total = res.total
        }
      })
    },
    // 异常信息提醒 历史
    getAbnormalListPanel(params) {
      abnormalListPanel(params).then((res) => {
        if(res.code === 200) {
          this.tableData = res.rows
          this.total = res.total
        }
      })
    },
    handleClick(row) {
      console.log(row);
      getLogPanel(row.extend1).then((res) => {
        this.logText = res
        this.openLog = true
      })
    },
    // 翻页
    getPagination(data) {
      if(this.statuInd == 0) {
        this.getCurrentAbnormalList(data)
      }else if(this.statuInd == 1) {
        this.getAbnormalListPanel(data)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination-container {
  min-height: 52px;
}
</style>